<template>
	<view class="pagess">
		<view class="back flex_c">
			<image src="../../static/icon/left_jt.png" mode="aspectFill" @click="goBack"></image>
			<text>活动详情</text>
		</view>
		<view class="poster">
			<image class="poster_img1" :src="activityDetail.bg_image" mode="aspectFill"></image>
			<image class="poster_img2" @click="goReceiveDetail" src="../../static/image/activity3.png" mode="aspectFill"></image>
		</view>

		<view class="gift flex_ZC" v-for="(item,index) in levelsList" :key="item.id">
			<view class="djs">
				<u-count-down :time="countDown" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
					<view class="time_box flex_dq">
						<text class="time2"> 距活动结束</text>
						<text class="time1">{{ timeData.days }}</text>
						<text class="time2"> 天</text>
						<text class="time1">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
						<text class="time2"> 时</text>
						<text class="time1">{{ timeData.minutes }}</text>
						<text class="time2"> 分</text>
						<text class="time1">{{ timeData.seconds }}</text>
						<text class="time2"> 秒</text>
					</view>
				</u-count-down>
			</view>
			<view class="gift_img1 ">
				<text class="overflow1">{{item.level_name}}</text>
				<image class="gift_img1" src="../../static/image/activity2.png" mode="aspectFill"></image>
			</view>
			<view class="gift_box1  flex_dq" v-for="(item2,index) in item.conditions" :key="item2.id" >
				<image class="gift_img2" :src="item2.goods_image" mode="aspectFill"></image>
				<view class="condition flex_Z">
					<text class="f28 c6 overflow1">直推{{item2.number}}位{{item2.goods_name}}</text>
					<text class="proportion">{{item2.achieved_number}}/{{item2.number}}</text>
				</view>
				<view class="btn_status flex_c">
					<text :class="item2.status?'avtive1':''">{{item2.status?'已完成':'未完成'}}</text>
				</view>
			</view>

			<view class="task flex_ZC">
				<text v-if="activityDetail.type == 1" >完成任务可领取({{item.prize_received}}/{{item.prize_number}})</text>
				<text v-if="activityDetail.type == 2" >完成任务二选一({{item.prize_received}}/{{item.max_number}})</text>
				<view class="reward_box flex_dq" >
					<view class="reward flex_ZC" v-for="(item3,index) in item.prizes" :key="item3.goods_id" >
						<image class="gift_img2" :src="item3.goods_image" mode="aspectFill"></image>
						<text>{{item3.goods_name}}</text>
						<view class="btn_receive flex_c" v-if="item.conditions_status">
							<text class="avtive2" v-if="item3.status == 0" @click="cilckReceive(item3)">领取</text>
							<text class="avtive2"  v-if="item3.status == 1 && item3.good_type ==1">待发放</text>
							<text class="avtive3"  v-if="item3.status == 1 && item3.good_type ==2" @click="goDuihuan(item3)">去兑换</text>
							<text  v-if="item3.status == 2">已发放</text>
							<text  v-if="item3.status == 3">已失效</text>
						</view>
						<view class="btn_receive flex_c" v-else >
							<text >未满足</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="boxShow2" mode="center" @close="boxShow2=false" closeable bgColor="transparent">
			<view class="zz_wrap">
				<view class="tit">
					请输入领取奖励的账号信息
				</view>
				<view class="ipt">
					<input type="text"  v-model.trim="account1" placeholder="请输入领取账号"   />
				</view>
				<view class="ipt">
					<input type="number" v-model.trim="phone1" placeholder="请输入领取手机号" />
				</view>
				<view class="zz_btn" @click="isSubmit">
					确认
				</view>
		
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		activityInfo,activityReceive,activityRecordList
	} from '../../api/guessing.js'
	export default {
		data() {
			return {
				ids: '',
				countDown:0,
				account1:'',
				phone1:'',
				timeData: {},
				levelsList:{},
				activityDetail: {},
				goodsInfo:{},
				boxShow2: false, //开奖结束弹窗
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
			this.initDetails()
		},
		onShow() {
			this.initDetails()
		},
		methods: {
			onChange(e) {
				// console.log(e);
				this.timeData = e
			},
			// 详情
			initDetails() {
				activityInfo({
					id: this.ids
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						let timestamp = new Date().getTime();
						this.activityDetail = res.data
						this.levelsList = res.data.levels
						this.countDown = res.data.end_time *1000 - timestamp
						console.log('倒计时---', this.countDown);
					}
				})
			},
			// 	领取
			cilckReceive(item3){
				console.log(this.activityDetail.type);
				this.goodsInfo = item3
				if(this.activityDetail.type == 1){
					this.boxShow2 = true
				}else{
					this.isSubmit()
				}
			},
			goDuihuan(item3){
				console.log(item3);
				let mallCacheInfo = {
					spaceId: 0,
					numbers: 1,
					type: 9,
					id: item3.goods_id,
					record_id:item3.record_id,
				}
				uni.setStorageSync('mallCacheInfo', mallCacheInfo)
				
				uni.navigateTo({
					url:'/pagesMy/shoppingCenter/settlementGoods'
				})
			},
			isSubmit(){
				activityReceive({
					account:this.account1,
					phone:this.phone1,
					activity_id:this.goodsInfo.activity_id,
					level_id: this.goodsInfo.activity_level_id,
					prize_id: this.goodsInfo.id
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						this.initDetails()
						this.boxShow2 = false
						if(this.activityDetail.type == 2){
							let mallCacheInfo = {
								spaceId: 0,
								numbers: 1,
								type: 9,
								id: res.data.goods_id,
								record_id:res.data.record_id,
							}
							uni.setStorageSync('mallCacheInfo', mallCacheInfo)
							uni.navigateTo({
								url:'/pagesMy/shoppingCenter/settlementGoods'
							})
						}
					}
				})
			},
			goReceiveDetail(){
				uni.navigateTo({
					url:'/pagesMy/activityCenter/receiveDetail?activityId=' + this.ids + '&img=' + this.activityDetail.bg_image
				})
			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background: #fb7f42;
	}

	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.back {
		position: fixed;
		top: 30rpx;
		/* #ifdef APP */
		top: 60rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>text {
		font-size: 28rpx;
		/* #ifdef APP */
		font-size: 36rpx;
		/* #endif */
		color: #ffffff;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}

	.poster {
		position: relative;
		width: 100%;
		height: 1060rpx;
	}

	.poster_img1 {
		width: 100%;
		height: 1060rpx;
	}

	.poster_img2 {
		position: absolute;
		top: 300rpx;
		left: 0;
		width: 150rpx;
		height: 56rpx;
	}

	.gift {
		position: relative;
		width: 690rpx;
		margin: 0 auto 80rpx;
		border-radius: 20rpx;
		background: linear-gradient(180deg, #FFF7E8 0%, #FFE8C5 98%);
		transform: translateY(-270rpx);
		padding: 70rpx 0 30rpx;
	}
	.time_box{
		margin-bottom: 40rpx;
	}
	.time1{
		width: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 30rpx;
		color: #ffffff;
		background: #FF5F2A;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin:0 12rpx;
	}
	.time2{
		font-size: 32rpx;
		color: #3d3d3d;
	}
	.gift_img1 {
		width: 402rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		position: absolute;
		top: -16rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	
	 @font-face{
	     font-family: 'iconfont';
	     src:url("~@/iconfont/almm.ttf");
	 }
	.gift_img1>text{
		width: 300rpx;
		position: absolute;
		font-size: 36rpx;
		color: #ffffff;
		font-family: 'iconfont';
		z-index: 9;
		margin-top: 4rpx;
		text-align: center;
	}
	.gift_img1>image{
		position: absolute;
		width: 402rpx;
		height: 72rpx;
		z-index: 6;
	}

	.gift_box1 {
		width: 642rpx;
		padding: 20rpx 0;
		background: #FCFBFA;
		margin-bottom: 30rpx;
	}

	.gift_img2 {
		width: 120rpx;
		height: 120rpx;
		border-radius: 30rpx;
		margin: 0 24rpx 0 24rpx;
		box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
	}

	.condition {
		width: 300rpx;
	}

	.proportion {
		font-size: 26rpx;
		color: #EE4F26;
	}

	.btn_status>text {
		width: 164rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: pink;
		border-radius: 36rpx;
		font-size: 26rpx;
		background: #E0DAD3;
		color: #ffffff;
	}

	.avtive1 {
		background: #fceadc !important;
		color: #FD8331 !important;
	}
	.avtive2 {
		background: linear-gradient( 180deg, #FE9546 14%, #FF5625 100%) !important;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(122,68,3,0.3);
	}
	.avtive3 {
		background: linear-gradient( 180deg, #ff674d 14%, #ff36ab 100%) !important;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(122,68,3,0.3);
	}
	.task {
		width: 642rpx;
		height: 490rpx;
		background: #FCFBFA;
		font-size: 32rpx;
		color: #EE4F26;
	}

	.task>text {
		margin-top: 30rpx;
		font-weight: 700;
	}

	.reward_box {
		width: 100%;
		margin-top: 20rpx;
		overflow-x: auto;
	}

	.reward {
		padding: 30rpx 24rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.reward>image {
		width: 192rpx;
		height: 204rpx;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}

	.btn_receive {
		width: 100%;
		margin-top: 30rpx;
	}

	.btn_receive>text {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		background: #E0DAD3;
		color: #ffffff;
		border-radius: 40rpx;
	}
	
	
	.zz_wrap {
		width: 602rpx;
		// height: 416rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	
		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 50rpx;
	
		}
	
		.ipt {
			width: 522rpx;
			height: 76rpx;
			background: #f2f2f2;
			border-radius: 410rpx 410rpx 410rpx 410rpx;
			margin: 0 auto;
			margin-top: 62rpx;
	
			>input {
				width: 502rpx;
				height: 76rpx;
				background: #f2f2f2;
				border-radius: 410rpx 410rpx 410rpx 410rpx;
				padding-left: 20rpx;
				font-size: 30rpx;
				color: #333;
			}
		}
	
		.zz_btn {
			width: 522rpx;
			height: 76rpx;
			background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
			border-radius: 410rpx 410rpx 410rpx 410rpx;
			border-radius: 410rpx 410rpx 410rpx 410rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			margin-bottom: 62rpx;
			font-weight: 300;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 76rpx;
		}
	
		.otherinfo {
			width: 522rpx;
			// height: 400rpx;
			padding-bottom: 40rpx;
			margin: 0 auto;
			margin-top: 48rpx;
	
			.otherinfo_tit {
				font-size: 28rpx;
				color: #333;
			}
	
			.otherinfowrap {
				width: 522rpx;
				height: 200rpx;
				position: relative;
				margin: 0 auto;
	
				>image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-top: 46rpx;
				}
	
				.othername {
					width: 300rpx;
					height: 38rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 26rpx;
					color: #333;
					position: absolute;
					top: 34rpx;
					left: 128rpx;
				}
	
				.otherphone {
					width: 300rpx;
					height: 38rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 26rpx;
					color: #333;
					position: absolute;
					top: 80rpx;
					left: 128rpx;
				}
	
				.otherphone2 {
					width: 300rpx;
					height: 38rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 26rpx;
					color: #333;
					position: absolute;
					top: 124rpx;
					left: 128rpx;
				}
	
				.othernum {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #D7D6E1;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
	
				}
			}
	
			.other_btnwrap {
				width: 522rpx;
				height: 72rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 70rpx;
	
				.other_btn1 {
					width: 220rpx;
					height: 72rpx;
					border-radius: 280rpx 280rpx 280rpx 280rpx;
					border: 2rpx solid #A68A64;
					font-size: 28rpx;
					color: #333;
					text-align: center;
					line-height: 72rpx;
				}
	
				.other_btn2 {
					width: 220rpx;
					height: 72rpx;
					background: linear-gradient( 274deg, #F9A569 0%, #F94A49 100%);
					border-radius: 280rpx 280rpx 280rpx 280rpx;
					font-size: 28rpx;
					color: #333;
					text-align: center;
					line-height: 72rpx;
				}
			}
		}
	}
	
</style>